<template>
  <div>
    <el-form :inline="true" :model="checkForm" ref="checkForm" class="demo-form-inline">
      <el-form-item>
        <div class="monthClass">
          <h4 class="monthClassName">一级分类</h4>
          <div class="monthClassList one">
            <el-checkbox-group v-model="checkedClass" @change="classList">
              <el-checkbox
                v-for="ind in oneClass"
                :label="ind.id + ',' + ind.className"
                style="width: 140px;margin-left: 10px"
                class="one"
                @change="obtainNext">{{ ind.className }}
                <i class="el-icon-arrow-right classIcon" :value="ind.id" @click="nextShow"></i>
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <!--<div class="monthClass">-->
          <!--<h4 class="monthClassName">二级分类</h4>-->
          <!--<div class="monthClassList two">-->
            <!--<el-checkbox-group v-model="checkedClass" @change="classList">-->
              <!--<el-checkbox v-for="ind in twoClass" :label="ind.id + ',' + ind.cateName" style="width: 150px;margin-left: 10px" class="two" @change="obtainNext">{{ ind.cateName }}-->
                <!--<i class="el-icon-arrow-right classIcon" :value="ind.id" @click="nextShow"></i>-->
              <!--</el-checkbox>-->
            <!--</el-checkbox-group>-->
          <!--</div>-->
        <!--</div>-->
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import { scgl } from '../../config/proxy.js'
  import { mapState } from 'vuex'
  import mixins from '../../components/mixins.vue'
  export default {
    mixins: [mixins],
    data () {
      return {
        checkForm: {},
        checkedClass: [],
        checkedName: [],
        oneClass: [], // 一级分类
        twoClass: [],  // 二级分类
        iconFlag: false,
        temporary: []
      }
    },
    methods: {
      classList (val) {
        if (this.iconFlag) {
          this.checkedClass = this.temporary
          this.iconFlag = false
        } else {
          if (val.length > 10) {
            val.pop()
            this.$message({
              showClose: true,
              message: '最多只能勾选10个分类',
              type: 'warning'
            })
          } else {
            this.checkedName = []
            for (let i in this.checkedClass) {
              this.checkedName.push(this.checkedClass[i].split(',')[1])
            }
          }
        }
//        console.log(this.checkedClass)
      },
      obtainNext (event) {
        console.log(event.target)
      },
      nextShow () {
        console.log('b')
      }
    },
    computed: mapState({
      userName: function (state) {
        return state.user.info.user_name
      }
    }),
    created () {
      scgl.oneLevel({}, res => {
        this.oneClass = res.content
      })  // 一级分类
    }
  }
</script>
<style>
  @media screen and (min-width:1000px) {
    .supplier-form{
      max-width: 600px;
    }
  }
  .el-form--inline div {
    display: inline-block;
    /*float: left;*/
  }
  .el-dialog__body {
    padding-top: 0;
  }
  .shuoming {
    line-height: 2;
    font-size: 16px;
    font-weight: 700;
    color: #1f2d3d;
  }
  .payList1 {
    margin-bottom: 15px;
  }

  .line-x {
    border-top: 1px solid #f2f2f2;
    margin-bottom: 15px;
  }

  .el-checkbox__label {
    padding-left: 15px;
  }

  .monthClass {
    margin-right: 50px;
    width: 200px;
    height: 350px;
    border: 1px solid #eaeefb;
    border-radius: 5px;
  }

  .monthClassName {
    height: 35px;
    margin: 0;
    text-align: center;
    border-bottom: 1px solid #eaeefb;
  }

  .monthClassList {
    overflow-y: auto;
    overflow-x: hidden;
    height: 315px;
    width: 190px;
    margin-left: 10px;
  }

  .classIcon {
    position: absolute;
    top: 11px;
    right: -14px;
  }
</style>
